/**
 * 全局组件注册
 * 统一管理和注册应用中的全局组件，包括社交互动组件和通用组件
 * @author Claude
 */

import type { App } from 'vue'

// 导入社交互动组件
import CommentSystem from '@/components/social/CommentSystem.vue'
import LikeButton from '@/components/social/LikeButton.vue'
import ShareButton from '@/components/social/ShareButton.vue'
import UserMention from '@/components/social/UserMention.vue'
import NotificationCenter from '@/components/social/NotificationCenter.vue'
import UserRelationship from '@/components/social/UserRelationship.vue'

// 导入媒体组件
import AiTagsPanel from '@/components/media/AiTagsPanel.vue'

// 导入移动端组件
import MobileMediaGrid from '@/components/mobile/MobileMediaGrid.vue'
import MobileUploader from '@/components/mobile/MobileUploader.vue'

// 全局组件配置
const globalComponents = {
  // 社交互动组件
  CommentSystem,
  LikeButton,
  ShareButton,
  UserMention,
  NotificationCenter,
  UserRelationship,
  
  // 媒体组件
  AiTagsPanel,
  
  // 移动端组件
  MobileMediaGrid,
  MobileUploader
}

/**
 * 注册全局组件
 * @param app Vue应用实例
 */
export function registerGlobalComponents(app: App) {
  // 批量注册全局组件
  Object.entries(globalComponents).forEach(([name, component]) => {
    app.component(name, component)
  })
}

/**
 * 社交组件配置项
 * 统一配置社交组件的默认参数
 */
export const socialComponentConfig = {
  // 评论系统默认配置
  commentSystem: {
    maxLength: 1000,
    maxNestLevel: 3,
    emojiEnabled: true,
    mentionEnabled: true,
    imageEnabled: true,
    reactionEnabled: true
  },
  
  // 点赞按钮默认配置
  likeButton: {
    iconType: 'heart' as const,
    size: 'medium' as const,
    variant: 'default' as const,
    showCount: true,
    animationDuration: 600
  },
  
  // 分享按钮默认配置
  shareButton: {
    size: 'medium' as const,
    variant: 'default' as const,
    showText: true,
    showCount: true,
    showQrCode: true,
    showStats: false
  },
  
  // 用户提及默认配置
  userMention: {
    maxLength: 1000,
    showMentionedUsers: true,
    allowMultipleMentions: true,
    minSearchLength: 1,
    maxSuggestions: 8,
    searchDelay: 300
  },
  
  // 通知中心默认配置
  notificationCenter: {
    position: 'top-right' as const,
    maxNotifications: 50,
    autoRefresh: true,
    refreshInterval: 30000,
    showBadge: true
  },
  
  // 用户关系默认配置
  userRelationship: {
    showDetailPanel: false,
    compact: false
  }
}

/**
 * 组件使用示例
 * 提供各个组件的基本使用示例代码
 */
export const componentExamples = {
  commentSystem: `
<!-- 基本使用 -->
<CommentSystem 
  :target-id="123"
  target-type="activity"
  :allow-comment="true"
  @comment-added="handleCommentAdded"
/>

<!-- 带自定义配置 -->
<CommentSystem 
  :target-id="456"
  target-type="media"
  :max-length="500"
  :max-nest-level="2"
  :emoji-enabled="false"
/>
  `,
  
  likeButton: `
<!-- 基本使用 -->
<LikeButton 
  :target-id="123"
  target-type="activity"
  :initial-count="25"
  @like-changed="handleLikeChanged"
/>

<!-- 不同样式 -->
<LikeButton icon-type="thumb" size="large" variant="filled"/>
<LikeButton icon-type="star" size="small" variant="outline"/>
  `,
  
  shareButton: `
<!-- 基本使用 -->
<ShareButton 
  :share-url="shareUrl"
  :title="activity.title"
  :description="activity.description"
  @share="handleShare"
/>

<!-- 紧凑模式 -->
<ShareButton compact :show-text="false" variant="text"/>
  `,
  
  userMention: `
<!-- 基本使用 -->
<UserMention 
  v-model="commentText"
  placeholder="输入 @ 来提及用户..."
  @mention-added="handleMentionAdded"
/>

<!-- 自定义用户列表 -->
<UserMention 
  v-model="content"
  :custom-users="familyMembers"
  :allow-self-mention="false"
/>
  `,
  
  notificationCenter: `
<!-- 基本使用 -->
<NotificationCenter 
  @notification-click="handleNotificationClick"
  @settings-changed="handleSettingsChanged"
/>

<!-- 自定义位置 -->
<NotificationCenter 
  position="bottom-right"
  :auto-refresh="false"
/>
  `,
  
  userRelationship: `
<!-- 基本使用 -->
<UserRelationship 
  :user-id="456"
  @relationship-changed="handleRelationshipChanged"
/>

<!-- 显示详情面板 -->
<UserRelationship 
  :user-id="789"
  :show-detail-panel="true"
  compact
/>
  `
}

/**
 * 工具函数：获取组件默认配置
 * @param componentName 组件名称
 * @returns 对应组件的默认配置
 */
export function getComponentConfig(componentName: keyof typeof socialComponentConfig) {
  return socialComponentConfig[componentName]
}

/**
 * 工具函数：合并组件配置
 * @param componentName 组件名称
 * @param userConfig 用户自定义配置
 * @returns 合并后的配置
 */
export function mergeComponentConfig<T>(
  componentName: keyof typeof socialComponentConfig,
  userConfig: Partial<T> = {}
): T {
  const defaultConfig = socialComponentConfig[componentName] as T
  return { ...defaultConfig, ...userConfig }
}

/**
 * 组件注册状态检查
 */
export function checkGlobalComponents(app: App) {
  const registeredComponents = Object.keys(globalComponents)
  const missingComponents: string[] = []
  
  registeredComponents.forEach(name => {
    if (!app.component(name)) {
      missingComponents.push(name)
    }
  })
  
  if (missingComponents.length > 0) {
    console.warn('未注册的全局组件:', missingComponents)
    return false
  }
  
  console.log('✅ 所有全局组件已成功注册')
  return true
}

// 导出类型定义
export type GlobalComponentName = keyof typeof globalComponents
export type SocialComponentConfig = typeof socialComponentConfig

export default globalComponents